<template>
  <transition name="slide">
      <div id="search">
        <div class="search-wrapper">
            <i class="iconfont icon-fanhui return" @click="back"></i>
            <div class="input-wrapper">
                <input type="text" placeholder="搜索所有游戏" v-model="query">
                <i class="iconfont icon-icon-cross-empty" v-show="query" @click="clear"></i>
            </div>
            <div class="search-btn">
                <i class="iconfont icon-search"></i>
            </div>
        </div>
    </div>
  </transition>
</template>
<script>
    export default{
        data(){
            return{
                deleteState:false,
                query:''
            }
        },
        methods:{
            back(){
                this.$router.back();
            },
            clear(){
                this.query="";
            }
        },
    }
</script>
<style lang="scss" scoped>
    .slide-enter-active, .slide-leave-active{
		 transition: all 0.3s
	}
	  .slide-enter, .slide-leave-to{
	  	transform: translate(100%, 0)
	  }
    #search{
        position:fixed;
        top:0;
        bottom:0;
        width:100%;
        background:#fff;
        z-index:999;
    }
    .search-wrapper{
        width:100%;
        height:48px;
        line-height:48px;
        background:#07263b;
        display:flex;
        .return{
            padding:0 20px;
        }
        i{
            color:#fff;
        }
        .input-wrapper{
            width: 70%;
            background: #fff;
            height: 35px;
            margin-top: 7px;
            line-height: 34px;
            position:relative;
            input{
                padding:0 30px 0 16px;
                height:100%;
                width:100%;
                box-sizing:border-box;
                outline: none;
                border:none;
            }
            i{
                color:#07263b;
                position:absolute;
                top:50%;
                right:5px;
                font-size:20px;
                transform:translateY(-50%);
            }
        }
        .search-btn{
            flex:1;
            text-align:center;
            i{
                font-size:20px;
            }
        }
    }
</style>
